/*
 * SettingButton 设置页面按钮
 */
import QtQuick 2.14
import QtQuick.Controls 2.14
import QtGraphicalEffects 1.14

Item {
    id: root

    /* property 定义开始 */
    // 按钮
    property int settingBtnRadius: 13
    property int settingBtnBorderWidth: 1
    property string settingBtnBorderColor: "transparent"
    property url defBtnImgUrl: "qrc:/icons/setting_help.png" // 默认按钮背景图片
    property url hoveredBtnImgUrl: "qrc:/icons/setting_help_hovered.png" // 鼠标移入按钮背景图片

    // 文字
    property string settingBtnFontFamily: "Alibaba PuHuiTi"
    property int settingBtnFontPixelSize: 21
    property string settingBtnDefFontColor: "#FF222222" // 默认字体颜色
    property string settingBtnHovFontColor: "#FFFFFFFF" // 移入字体颜色
    property string settingBtnText: "--SettingButton Default--"

    // 信号
    signal released()
    /* property 定义结束 */

    // 阴影
    Rectangle {
        anchors.fill: parent
        radius: settingBtnRadius
        border.width: settingBtnBorderWidth
        border.color: settingBtnBorderColor
        layer.enabled: true
        layer.effect: DropShadow {
            horizontalOffset: 2
            verticalOffset: 2
            radius: 9
            samples: 19
            transparentBorder: true
            color: "#FFFFFFFF"
        }
    }

    // 背景(hover后的背景)
    Item {
        anchors.fill: parent

        Image {
            anchors.fill: parent
            source: hoveredBtnImgUrl
        }

        // 文字
        Label {
            anchors.fill: parent
            font.family: settingBtnFontFamily
            font.pixelSize: settingBtnFontPixelSize
            color: settingBtnHovFontColor
            text: qsTr(settingBtnText)
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter
            leftPadding: 40
        }
    }

    // 背景(默认背景)
    Item {
        anchors.fill: parent
        id: defaultBg
        state: "default"

        Image {
            anchors.fill: parent
            source: defBtnImgUrl
        }

        // 文字
        Label {
            anchors.fill: parent
            font.family: settingBtnFontFamily
            font.pixelSize: settingBtnFontPixelSize
            color: settingBtnDefFontColor
            text: qsTr(settingBtnText)
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter
            leftPadding: 40
        }

        states: [
            State {
                name: "default"
                PropertyChanges {
                    target: defaultBg
                    opacity: 1.0
                }
            },
            State {
                name: "hover"
                PropertyChanges {
                    target: defaultBg
                    opacity: 0.0
                }
            }
        ]

        transitions: [
            Transition {
                from: "default"
                to: "hover"

                NumberAnimation {
                    target: defaultBg
                    property: "opacity"
                    duration: 100
                    easing.type: Easing.InOutQuad
                }
            },
            Transition {
                from: "hover"
                to: "default"

                NumberAnimation {
                    target: defaultBg
                    property: "opacity"
                    duration: 100
                    easing.type: Easing.InOutQuad
                }
            }
        ]
    }

    MouseArea {
        id: mouseArea
        anchors.fill: parent
        hoverEnabled: true
        cursorShape: Qt.PointingHandCursor
        onEntered: {
            defaultBg.state = "hover"
        }
        onExited: {
            defaultBg.state = "default"
        }
        onReleased: root.released()
    }

}
